<template>
  <div id="app">
    <main>
  
      <div class="video" v-if="this.listData!=''">
        <div v-for="item in listData" :key='item.unid' v-if='item.name == vname'>
          <my-video :sources="[{src: item.pathHLS,type:'video/mp4'}]" :options="video.options"></my-video>
        </div>
        <nav class="info">
          <label><i class="el-icon-menu"></i>信号源:</label>
          <div class="info-right">
            <ul class="info-list">
              <li v-for="item in listData" :key='item.unid' @click="videoitem(item.name)" :class='{videonameactive:item.name==showactive}'>
                {{item.name}}
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <div class="none_video" v-else>
        <img src="../img/bg1.png" v-if="this.videotype=='0'">
        <img src="../img/bg2.png" v-if="this.videotype=='1'">
        <img src="../img/bg3.png" v-if="this.videotype=='2'">
        <img src="../img/bg4.png" v-if="this.videotype=='3'">
        <img src="../img/bg4.png" v-if="this.videotype==null">
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    Vedio
  } from '../api/api'
  import myVideo from 'vue-video'
  import {
    Toast
  } from 'mint-ui';
  export default {
    components: {
      myVideo
    },
     props: ['videotype'],
    data() {
      return {
        listData: [],
        vediosrc: '',
        showactive: '',
        video: {
          options: {
            volume: 0.6,
            poster: '../../static/img/vedio.png'
          }
        },
        vname: '',
      };
    },
  
    methods: {
      videoitem(vname) {
        let instance = Toast({
          message: '成功切换信号源',
          iconClass: 'el-icon-check'
        });
        setTimeout(() => {
          instance.close();
        }, 800)
        this.vname = vname;
        this.showactive = vname;
      },
      getData() {
        let options = {
          params: {
            enterpriseUnid: JSON.parse(sessionStorage.getItem('WapEnterpriseUnid')).unid
          }
        }
        //调取接口
        Vedio(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
            if (this.listData != 0) {
              this.vediosrc = this.listData[0].pathHLS;
              this.vname = this.listData[0].name;
              this.showactive = this.vname;
            }
           // this.videotype = JSON.parse(sessionStorage.getItem('Wapvideo')).type
          }
        })
      }
    },
    //页面加载时候
    created() {
      this.getData();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .info {
    background: #efefef;
    overflow: hidden;
    font-size: .9rem;
    label {
      width: 70px;
      float: left;
      margin-left: 10px;
      padding: 15px 0px;
      i {
        color: #108def;
      }
    }
    .info-list{
    
    }
    .info-right {
      float: left;
     width: 75%;
     overflow: auto;
         padding: 15px 0px;
     .info-list{
       width: 200%;
     }
      li {
      
        border: 1px solid #72b9f6;
        padding: 5px 8px;
        border-radius: 15px;
        color: #108dee;
            display: inline;
    margin-left: 5px;
      }
    }
  }
</style>
